<template>
  <div class="layout-container">
    <el-container class="layout-container">
      <el-header height="60px" class="layout-header">
        <div class="logo">
          <i class="el-icon-scissors"></i>
          <span>服装定制管理系统</span>
        </div>
        <div class="header-right">
          <el-tooltip content="消息通知" placement="bottom">
            <el-badge :value="3" class="notification-icon">
              <i class="el-icon-bell"></i>
            </el-badge>
          </el-tooltip>
          
          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link avatar-box">
              <img src="../assets/images/avatar.jpg" alt="头像" class="avatar">
              <span>{{ username }}</span>
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="profile">个人中心</el-dropdown-item>
              <el-dropdown-item command="settings">系统设置</el-dropdown-item>
              <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>
      
      <el-container>
        <el-aside width="200px" class="layout-aside">
          <el-menu
            :default-active="activeMenu"
            class="el-menu-vertical"
            background-color="#304156"
            text-color="#bfcbd9"
            active-text-color="#409EFF"
            :collapse="isCollapse"
            @select="handleSelect"
            router>
            
            <el-menu-item index="/home">
              <i class="el-icon-s-home"></i>
              <span slot="title">首页</span>
            </el-menu-item>
            
            <!-- 根据角色显示不同菜单 -->
            <!-- 管理员菜单 -->
            <template v-if="role === 'admin'">
              <el-submenu index="2">
                <template slot="title">
                  <i class="el-icon-s-custom"></i>
                  <span>用户管理</span>
                </template>
                <el-menu-item index="/admin/user">用户信息管理</el-menu-item>
              </el-submenu>
              
              <el-submenu index="3">
                <template slot="title">
                  <i class="el-icon-s-check"></i>
                  <span>审核管理</span>
                </template>
                <el-menu-item index="/design/review">设计审核</el-menu-item>
              </el-submenu>
              
              <el-submenu index="4">
                <template slot="title">
                  <i class="el-icon-data-analysis"></i>
                  <span>数据统计</span>
                </template>
                <el-menu-item index="/stats/custom">定制统计</el-menu-item>
                <el-menu-item index="/stats/user">用户统计</el-menu-item>
              </el-submenu>
            </template>
            
            <!-- 设计师菜单 -->
            <template v-if="role === 'designer'">
              <el-submenu index="5">
                <template slot="title">
                  <i class="el-icon-picture"></i>
                  <span>设计管理</span>
                </template>
                <el-menu-item index="/design/works">我的作品</el-menu-item>
                <el-menu-item index="/design/upload">上传设计</el-menu-item>
              </el-submenu>
              
              <el-submenu index="6">
                <template slot="title">
                  <i class="el-icon-s-order"></i>
                  <span>订单管理</span>
                </template>
                <el-menu-item index="/order/pending">待处理订单</el-menu-item>
                <el-menu-item index="/order/completed">已完成订单</el-menu-item>
              </el-submenu>
            </template>
            
            <!-- 普通用户菜单 -->
            <template v-if="role === 'user'">
              <el-submenu index="7">
                <template slot="title">
                  <i class="el-icon-s-goods"></i>
                  <span>服装定制</span>
                </template>
                <el-menu-item index="/custom/submit">提交定制</el-menu-item>
                <el-menu-item index="/custom/list">我的定制</el-menu-item>
              </el-submenu>
              
              <el-menu-item index="/design/browse">
                <i class="el-icon-picture-outline"></i>
                <span slot="title">浏览设计</span>
              </el-menu-item>
              
              <el-menu-item index="/favorites">
                <i class="el-icon-star-on"></i>
                <span slot="title">我的收藏</span>
              </el-menu-item>
            </template>
            
            <!-- 所有角色共有菜单 -->
            <el-menu-item index="/message">
              <i class="el-icon-message"></i>
              <span slot="title">消息中心</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        
        <el-main class="layout-main">
          <!-- 面包屑导航 -->
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="index">{{ item }}</el-breadcrumb-item>
          </el-breadcrumb>
          
          <!-- 主体内容区 -->
          <div class="main-content">
            <router-view />
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'Layout',
  data() {
    return {
      isCollapse: false,
      username: localStorage.getItem('username') || '用户',
      role: localStorage.getItem('role') || 'user',
      activeMenu: '/home',
      breadcrumbList: []
    }
  },
  created() {
    this.activeMenu = this.$route.path
    this.updateBreadcrumb()
  },
  watch: {
    $route(to) {
      this.activeMenu = to.path
      this.updateBreadcrumb()
    }
  },
  methods: {
    handleSelect(key) {
      this.activeMenu = key
    },
    handleCommand(command) {
      if (command === 'logout') {
        this.$confirm('确定要退出登录吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          localStorage.removeItem('token')
          localStorage.removeItem('role')
          localStorage.removeItem('username')
          this.$message.success('退出登录成功')
          this.$router.push('/login')
        }).catch(() => {})
      } else if (command === 'profile') {
        this.$router.push('/profile')
      } else if (command === 'settings') {
        this.$router.push('/settings')
      }
    },
    updateBreadcrumb() {
      const matched = this.$route.matched
      if (matched.length > 1) {
        // 去除第一个(Layout)元素
        this.breadcrumbList = matched.slice(1).map(item => item.meta.title || item.name)
      } else {
        this.breadcrumbList = []
      }
    }
  }
}
</script>

<style scoped>
.layout-container {
  height: 100%;
}

.layout-header {
  background-color: #3a8ee6;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}

.logo {
  font-size: 18px;
  font-weight: bold;
  display: flex;
  align-items: center;
}

.logo i {
  font-size: 24px;
  margin-right: 10px;
}

.header-right {
  display: flex;
  align-items: center;
}

.notification-icon {
  margin-right: 20px;
  font-size: 20px;
  cursor: pointer;
}

.avatar-box {
  display: flex;
  align-items: center;
  color: #fff;
  cursor: pointer;
}

.avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 8px;
}

.layout-aside {
  background-color: #304156;
  overflow-x: hidden;
}

.el-menu {
  border-right: none;
}

.layout-main {
  background-color: #f0f2f5;
  padding: 20px;
  height: 100%;
  overflow-y: auto;
}

.el-breadcrumb {
  margin-bottom: 20px;
}

.main-content {
  background-color: #fff;
  padding: 20px;
  min-height: calc(100% - 40px);
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}
</style> 